import { createRouter, createWebHistory, RouteRecordRaw } from 'vue-router'
import HomeView from '../views/HomeView.vue'

const routes: Array<RouteRecordRaw> = [
  {
    path: '/',
    name: 'home',
    component: HomeView,
    children: [
      {
        path: '/useVModel1',
        name: 'useVModel1',
        component: () => import(/* webpackChunkName: "useVModel1" */ '../views/useVModel/useVModel.vue')
      },
      {
        path: '/useVModel2',
        name: 'useVModel2',
        component: () => import(/* webpackChunkName: "useVModel1" */ '../views/useVModel/useVModel2.vue')
      },
      {
        path: '/useDraggable',
        name: 'useDraggable',
        component: () => import(/* webpackChunkName: "useVModel1" */ '../views/useDraggable/useDraggable.vue')
      },
      {
        path: '/useDraggable2',
        name: 'useDraggable2',
        component: () => import(/* webpackChunkName: "useVModel1" */ '../views/useDraggable/useDraggableV2.vue')
      },
      {
        path: '/useStroage',
        name: 'useStroage',
        component: () => import(/* webpackChunkName: "useVModel1" */ '../views/useStroage/useStroage.vue')
      },
      {
        path: '/useStroage2',
        name: 'useStroage2',
        component: () => import(/* webpackChunkName: "useVModel1" */ '../views/useStroage/useStroage2.vue')
      },
      {
        path: '/useDropZone',
        name: 'useDropZone',
        component: () => import(/* webpackChunkName: "useVModel1" */ '../views/useDropZone/useDropZone.vue')
      },
      {
        path: '/useDropZone2',
        name: 'useDropZone2',
        component: () => import(/* webpackChunkName: "useVModel1" */ '../views/useDropZone/useDropZone2.vue')
      },
      {
        path: '/useElementBounding',
        name: 'useElementBounding',
        component: () => import(/* webpackChunkName: "useVModel1" */ '../views/useElementBounding/useElementBounding.vue')
      },
      {
        path: '/useElementBounding2',
        name: 'useElementBounding2',
        component: () => import(/* webpackChunkName: "useVModel1" */ '../views/useElementBounding/useElementBounding2.vue')
      },
      {
        path: '/useMouseInElement',
        name: 'useMouseInElement',
        component: () => import(/* webpackChunkName: "useVModel1" */ '../views/bigger/biggerDemo.vue')
      },
      {
        path: '/useMouseInElement2',
        name: 'useMouseInElement2',
        component: () => import(/* webpackChunkName: "useVModel1" */ '../views/bigger/biggerDemo2.vue')
      },
      {
        path: '/useTextSelection',
        name: 'useTextSelection',
        component: () => import(/* webpackChunkName: "useVModel1" */ '../views/useTextSelection/useTextSelection.vue')
      },
      {
        path: '/useTextSelection2',
        name: 'useTextSelection2',
        component: () => import(/* webpackChunkName: "useVModel1" */ '../views/useTextSelection/useTextSelection2.vue')
      },
    ],
  },
  {
    path: '/about',
    name: 'about',
    // route level code-splitting
    // this generates a separate chunk (about.[hash].js) for this route
    // which is lazy-loaded when the route is visited.
    component: () => import(/* webpackChunkName: "about" */ '../views/AboutView.vue')
  }
]

const router = createRouter({
  history: createWebHistory(process.env.BASE_URL),
  routes
})

export default router
